<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline"
      v-if="splitQueryData.splitOne.length > 0 ? true : false "
    >
      <a-row :gutter="48">
        <!-- 展示 -->
        <a-col :md="8" :sm="24"
          v-for="(item,$index) in splitQueryData.splitOne"
          :key="$index"
        >
          <a-form-item :label="item.title">
            <!-- select -->
            <a-select
              :showSearch="item.showSearch ? true : false"
              :autoClearSearchValue="false"
              v-if="item.type === 'select'"
              mode="tabs"
              v-model="queryParam[item.id]"
              :placeholder="item.placeholder"
              :allowClear="item.isAllowClear || true"
              :filterOption="filterOption"
            >
              <a-select-option
                v-for="option in queryOptions[item.options]"
                :value="option.value"
                :key="option.label"
              >{{ option.label }}</a-select-option>
                <!-- :value="option.value" -->
            </a-select>
            <!-- time -->
            <a-range-picker
              v-if="item.type === 'times'"
              v-model="queryParam[item.id]"
              valueFormat="YYYY-MM-DD"
            />
            <!-- input -->
            <a-input
              v-if="item.type === 'input'"
              v-model="queryParam[item.id]"
              :placeholder="item.placeholder"
              :allowClear="item.isAllowClear || true"
            />
          </a-form-item>
        </a-col>
        <!-- 隐藏 -->
        <template v-if="advanced" >
          <a-col :md="8" :sm="24"
            v-for="(item,$index) in splitQueryData.splitTwo"
            :key="$index + 2"
          >
            <a-form-item :label="item.title">
              <a-select
                :showSearch="item.showSearch ? true : false"
                :autoClearSearchValue="false"
                mode="tabs"
                v-if="item.type === 'select'"
                v-model="queryParam[item.id]"
                :placeholder="item.placeholder"
                :allowClear="item.isAllowClear || true"
                :filterOption="filterOption"
              >
                <a-select-option
                  v-for="option in queryOptions[item.options]"
                  :key="option.label"
                  :value="option.value"
                >{{ option.label }}</a-select-option>
              </a-select>
              
              <a-input
                v-if="item.type === 'input'"
                @change="inputChange"
                v-model="queryParam[item.id]"
                :placeholder="item.placeholder"
                :allowClear="item.isAllowClear || true"
              />
              
              <a-range-picker
                v-if="item.type === 'times'"
                v-model="queryParam[item.id]"
                valueFormat="YYYY-MM-DD"
              />
            </a-form-item>
          </a-col>
        </template>

        <a-col :md="!advanced && 8 || 24" :sm="24">
          <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
            <a-button type="primary" @click="handleFilter">查询</a-button>
            <!-- <a-button style="margin-left: 8px" @click="handleReset">重置</a-button> -->
            <a @click="toggleAdvanced" style="margin-left: 8px" v-if="splitQueryData.splitTwo.length > 0 ">
              {{ advanced ? '收起' : '展开' }}
              <a-icon :type="advanced ? 'up' : 'down'"/>
            </a>
          </span>
        </a-col>
      </a-row>

    </a-form>
  </div>
</template>

<script>

export default {
  props:{
    // 查询参数
    queryParam:{
      type:Object,
      required:true
    },
    queryData:{
      type:Array,
      required:true
    },
    queryOptions:{
      type:Object
    },
    // 是否展开
    queryAdvanced:{
      type:Boolean,
      default:false
    }
  },
  data () {
    return {
      // locale,
      // 展开/关闭
      advanced: this.queryAdvanced,  // 占地一格或者一行
      splitQueryData:{
        splitOne:[],
        splitTwo:[]
      }
    }
  },
  watch:{
    'queryParam':function (newQueryParam) {
      this.$emit('input',newQueryParam)
    }
  },
  created(){
    this.initialize()
  },
  methods: {
    // a-select 自定义搜索（label）
    filterOption(input, option){
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 初始化数据 (展开/关闭)
    initialize(){
      if(this.queryData.length > 2){
        this.splitQueryData.splitOne = this.queryData.slice(0,2)
        this.splitQueryData.splitTwo = this.queryData.slice(2)
      }else {
        this.splitQueryData.splitOne = this.queryData
      }
      // console.info(this.splitQueryData,'this.splitQueryData')
    },
    handleFilter(){
      this.$emit('handleFilter')
    },
    inputChange(even,v){
      if( even.type === 'click' ) this.$emit('inputChange',)
    },
    // 重置
    // handleReset(){
    //   console.info(this.queryParam,'this.queryParam')
    // },
    // 展示关闭
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
  }
}
</script>

<style scoped>

</style>